<template>
  <div class="wrapper">
    <!-- banner区域 -->
    <HomeBanner></HomeBanner>
    <div class="h-1.5"></div>
    <!-- 首页产品列表 -->
    <Suspense>
      <HomeProductList></HomeProductList>
      <template #fallback>
        <el-skeleton :rows="15" />
        <!-- <LoadingSpinner message="正在加载组件商品详情..." /> -->
      </template>
    </Suspense>
  </div>
</template>
<script setup lang="ts">
import { ref,defineAsyncComponent } from "vue";
import { useRouter } from "vue-router";
import HomeBanner from "./components/Banner.vue";
const HomeProductList = defineAsyncComponent(
  () => import( "./components/ProductList.vue"));

const router = useRouter();
defineOptions({
  name: "Home",
});
const message = ref("hello world");
const handleClick = () => {
  console.log("click");
  message.value = "hello vue";
  router.push("/about");
};
</script>
